<template>
	<view class="writeOff">
		<NavBar title="扫码核销">
		</NavBar>
		<view class="main">
			<text>扫码核销</text>
			<text>二维码放入框内，即可自动扫描</text>
			<view class="code">
				<uv-qrcode ref="qrcode" size="480rpx" style="width: 100%;height: 100%;" :value="data.code" ></uv-qrcode>
			</view>
			<!-- <view class="time">
				<image src="/static/img/index/85.png" mode="widthFix"></image>
				3天内有效，过期时间：08-04 10:30
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import NavBar from '@/components/navBar.vue'
	import { onLoad } from '@dcloudio/uni-app';
	const data = reactive({
		code:""
	})
	onLoad(({ code }) => {
		const scanData={
			dataType:'verifyProduct',
			dataCode:code
		}
		data.code = JSON.stringify(scanData);
	})
</script>

<style lang="scss">
	:deep(.navBarTop) {
		background: transparent !important;
	}

	.writeOff {
		height: 100vh;
		background: linear-gradient(180deg, #EFE5F9 0%, #E9D9F4 100%), radial-gradient(100% 72% at 112% 77%, #FFF8EE 0%, rgba(255, 248, 238, 0) 100%), #F4F6FA;
	}

	.main {
		width: 700rpx;
		margin: 70rpx auto 0 auto;
		border-radius: 32rpx;
		background: #fff;
		padding: 36rpx 0 48rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		text:nth-of-type(1) {
			font-size: 40rpx;
			color: #000000;
		}

		text:nth-of-type(2) {
			font-size: 32rpx;
			color: #8C8C8C;

		}

		.code {
			width: 480rpx;
			height: 480rpx;
			background: #ccc;
			margin: 36rpx 0 20rpx 0;
		}

		.time {
			display: flex;
			align-items: center;
			padding: 12rpx 24rpx;
			border-radius: 37rpx;
			background: #EDFCD2;
			color: #50AC18;
			font-size: 24rpx;

			image {
				width: 36rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>